<template>
  <div>
    <el-table
      :data="users"
      border
      style="width: 95.2%; margin: 0px auto"
      size="medium"
    >
      <el-table-column prop="id" label="id" width="100"> </el-table-column>
      <el-table-column prop="username" label="用户名"> </el-table-column>
      <el-table-column prop="phone" label="手机号"> </el-table-column>
      <el-table-column prop="last_login" label="上次登录时间"> </el-table-column>
      <el-table-column prop="date_joined" label="注册时间"> </el-table-column>
      <el-table-column prop="email" label="邮箱"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="fnPopShow(scope.row.id)"
            >修改</el-button
          >
          <el-button size="mini" type="danger" @click="fnDelUser(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="修改用户" :visible.sync="pop_show" append-to-body>
      <el-form :model="userForm" status-icon ref="userForm" label-width="100px">
        <el-form-item label="用户名:" prop="username">
          <el-input
            type="text"
            v-model="userForm.username"
            autocomplete="off"
            size="small"
            class="input_width"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码:" prop="password">
          <el-input
            type="password"
            v-model="userForm.password"
            autocomplete="off"
            size="small"
            class="input_width"
          ></el-input>
        </el-form-item>

        <el-form-item label="手机号:" prop="mobile">
          <el-input
            type="text"
            v-model="userForm.phone"
            autocomplete="off"
            size="small"
            class="input_width"
          ></el-input>
        </el-form-item>
        <el-form-item label="邮箱:" prop="email">
          <el-input
            type="text"
            v-model="userForm.email"
            autocomplete="off"
            size="small"
            class="input_width"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm(userForm)"
            >提交</el-button
          >
          <el-button @click="resetForm('userForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import cons from "@/components/constant";
let token = localStorage.token;
export default {
  name: "UserTable",
  props: ["users"],
  data() {
    return {
      pop_show: false,
      edit_id: "",
      userForm: {
        username: "",
        phone: "",
        email: "",
        id: "",
        password: "",
      },
    };
  },
  methods: {
    // 点击修改触发的方法
    fnPopShow(id) {
      // 更改状态
      this.pop_show = true;
      this.edit_id = id;
      this.axios
        .get(cons.apis + "/users/users/" + id + "/", {
          headers: {
            Authorization: "JWT " + token,
          },
          responseType: "json",
        })
        .then((dat) => {
          // 获取的是指定id的用户信息
          
          console.log("修改用户的响应>>>>", dat)
          this.userForm.username = dat.data.username
          this.userForm.phone = dat.data.phone
          this.userForm.email = dat.data.email
          this.userForm.id = dat.data.id
          // this.userForm.password = dat.data.password;
        })
        .catch((err) => {
          console.log(err.response);
        });
    },
    // 点击删除触发的方法
    fnDelUser(id) {
      this.edit_id = id;
      this.$confirm("此操作将删除该商品, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.axios
            .delete(cons.apis + "/users/users/" + this.edit_id + "/", {
              headers: {
                Authorization: "JWT " + token,
              },
              responseType: "json",
            })
            .then((dat) => {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              // TODO 1. 刷新页面 2，： 重新请求所有数据的接口
              this.$emit("fnResetTable");
            })
            .catch((err) => {
              if (err.response.status == 404) {
                this.$message({
                  type: "info",
                  message: "删除失败！",
                });
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 点击提交确认修改
    submitForm(userForm) {
      this.axios
        .put(cons.apis + "/users/users/" + this.edit_id + "/", userForm, {
          headers: {
            Authorization: "JWT " + token,
          },
          responseType: "json",
        })
        .then((dat) => {
          // 修改成功，展示修改后的数据
          console.log("修改用户的响应", dat);
          this.$message({
            type: "success",
            message: "修改用户成功!",
          });
          // 关闭弹窗
          this.pop_show = false;
          this.$router.push("/home/user");
          // this.$emit("fnResetTable");
        })
        .catch((err) => {
          this.$message({
            type: "info",
            message: "修改失败",
          });
        });
    },
  },
};
</script>
